<template>
	<view class="login-box">
		<view class="top-nav">
			<image class="logo" src="../../static/logo.png" mode="aspectFit"></image>
		</view>
		<view class="form">
			<view class="item">
				<view class="label">用户名</view>
				<view class="iptValue">
					<u-icon name="man-add-fill" size="24"></u-icon>
					<input placeholder-style="color:#333;font-size:28rpx;" class="ipt" type="text"
						placeholder="请输入用户名/手机号" v-model="driverLoginForm.ownerPhone">
				</view>
			</view>
			<view class="item">
				<view class="label">密码</view>
				<view class="iptValue">
					<u-icon name="fingerprint" size="24"></u-icon>
					<input placeholder-style="color:#333;font-size:28rpx;" class="ipt" type="password"
						placeholder="请输入密码" v-model="driverLoginForm.wxId">
					<!-- <u-icon name="eye-fill" size="18"></u-icon> -->
					<u-icon name="eye-off" size="18"></u-icon>
				</view>
			</view>
			<view class="btn-tips">
				没有账号？<text class="reg" @click="toRouter('/pages/identity/index')">注册一个</text>
			</view>

			<view class="submit" @click="driverLogin">
				立即登录
			</view>

			<view class="bottom-xy">
				<u-checkbox @change="changeBtn"></u-checkbox>
				<text>
					请允许我们在特定的情况下，合理使用您的个人信息，请阅读并同意
					<text class="reg">【 隐私协议 】</text>等内容
				</text>

			</view>
			<view class="bottom-box">
				<u-divider textColor="#333" lineColor="#eee" text="其他登录方式"></u-divider>
				<view class="bottom-login">
					<u-icon name="weixin-circle-fill" color="#64d978" size="32"></u-icon>
					<image src="../../static/phone.png" class="phone" mode="aspectFill"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		login
	} from '@/api/mobile/driver.js'
	export default {
		data() {
			return {
				value4: false,
				driverLoginForm: {
					ownerPhone: "17719498724",
					wxId: "123456"
				}
			}
		},
		methods: {
			changeBtn() {

			},
			async handleLogin() {

			},
			driverLogin() {
				// 司机登录
				this.$store.dispatch('DriverLogin', this.driverLoginForm).then(() => {
					// 登录成功处理
					this.toRouter('pages/index/index')

				})
			},
			// 1. 优化跳转方法：区分 tabBar/普通页面
			toRouter(item) {
				// 定义所有 tabBar 页面路径（与 pages.json 中 tabBar.list 一致）
				const tabBarPaths = [
					"pages/index/index", // 首页（tabBar）
					"pages/user/index" // 我的（tabBar）
				];
				// 判断是否为 tabBar 页面
				if (tabBarPaths.includes(item)) {
					uni.switchTab({
						url: "/" + item
					}); // tabBar 页面用 switchTab
				} else {
					uni.navigateTo({
						url: "/" + item
					}); // 普通页面用 navigateTo
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.login-box {
		width: 100%;
		min-height: 100vh;
		// background-image: linear-gradient(to bottom, #f2cea5 0%, white 100%);
		// padding-top: 124rpx;
		box-sizing: border-box;
		padding: 124rpx 30rpx;

		.top-nav {
			width: 100%;

			.logo {
				height: 200rpx;
				width: 300rpx;
			}
		}

		.form {
			width: 100%;
			background: rgba(255, 255, 255, 0.8);
			padding: 40rpx 15rpx;
			box-sizing: border-box;
			border-radius: 20rpx;
			// box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;

			.item {
				width: 100%;
				margin-bottom: 30rpx;

				.label {
					font-size: 28rpx;
					color: #333;
					font-weight: 600;
				}

				.iptValue {
					width: 100%;
					height: 80rpx;
					border: 1rpx solid #eee;
					margin-top: 10rpx;
					border-radius: 10rpx;
					display: flex;
					align-items: center;
					padding: 0 14rpx;
					box-sizing: border-box;

					.ipt {
						width: 100%;
						height: 80rpx;
						padding: 0 20rpx;
						box-sizing: border-box;
						border-radius: 10rpx;
						color: #333;
						font-size: 28rpx;

						&::placeholder {
							color: #333;
						}
					}

					&.error {
						border: 1px solid #dd6161;

						.ipt {
							color: #dd6161;
						}
					}
				}

				.error {
					width: 100%;
					font-size: 24rpx;
					margin-top: 5rpx;
					color: #ff0000;
					animation: 0.4s linear errorForm;
				}
			}

			.remember {
				width: 100%;
				font-size: 24rpx;
				color: #333;
				display: flex;
				align-items: center;


				.name {
					margin-left: 10rpx;
				}
			}

			.submit {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				color: #fff;
				background-image: linear-gradient(to right, #ff9900 0%, #fcbd71 100%);
				height: 80rpx;
				border-radius: 10rpx;
				margin-top: 45rpx;
			}

			.btn-tips {
				width: 100%;
				font-size: 28rpx;
				color: #333;
				margin-top: 28rpx;
				text-align: right;

				.reg {
					color: #2979ff;
				}
			}

			.bottom-xy {
				width: 100%;
				font-size: 24rpx;
				color: #666;
				// text-align: center;
				margin-top: 38rpx;
				display: grid;
				grid-template-columns: 1fr 10fr;
				align-items: center;

				.reg {
					color: #2979ff;
				}
			}

			.bottom-box {
				margin-top: 148rpx;

				// background: red;
				.bottom-login {
					display: flex;
					justify-content: space-around;
					align-items: center;
					margin-top: 48rpx;

					.phone {
						height: 64rpx;
						width: 64rpx;
					}
				}
			}

		}

		@keyframes errorForm {
			0% {
				transform: translateX(-5rpx);
			}

			25% {
				transform: translateX(5rpx);
			}

			50% {
				transform: translateX(-5rpx);
			}

			75% {
				transform: translateX(5rpx);
			}

			100% {
				transform: translateX(0rpx);
			}
		}
	}
</style>